<template>
  <div>
    <!-- 隐藏的音频元素 -->
    <audio
      v-for="item in test_music_data"
      :key="item.music_id"
      class="audio_source"
      :id="item.music_id"
      @timeupdate="get_current_long"
      @playing="get_time_long"
      :src="item.music_src"
      @ended="hanleAudioend"
    ></audio>

    <!-- 音乐播放器主体 -->
    <div class="render_music_play">
      <div class="music_container">
        <!-- 左侧：音乐列表 -->
        <div class="all_music_box_left">
          <div class="music_list_nav"></div>
          <div class="music_list_box">
            <div
              class="music_list"
              v-for="(item, index) in test_music_data"
              :key="item.music_id"
            >
              <span class="music_index">{{ index + 1 }}</span>
              <div class="music_list_info">
                <div class="music_list_name">{{ item.song }}</div>
                <div class="music_list_func">
                  <span
                    :id="item.music_id"
                    @click="play_item"
                    class="iconfont icon-bofang list_span"
                    style="font-size: 35px;vertical-align: middle;"
                  ></span>
                  <span
                    @click="add_to"
                    class="iconfont icon-tianjia list_span"
                   style="font-size: 33px;vertical-align: middle;"
                  ></span>
                  <span
                    @click="select_more"
                    class="iconfont icon-more-br list_span"
                   style="font-size: 33px;vertical-align: middle;"
                  ></span>
                </div>
                <div class="music_list_singer">{{ item.singer }}</div>
                <div class="music_list_timing">{{ item.timelong }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：占位区域（未来可扩展） -->
        <div class="all_music_box_right"></div>
      </div>

      <!-- 底部：播放控件 -->
      <div class="audio_play_box">
        <div class="audio_play_left">
          <span class="iconfont icon-shangyishoushangyige" @click="prevMusic"></span>
          <span  id="bottom_play" class="iconfont icon-bofang" @click="playCurrentMusic"></span>
          <span class="iconfont icon-xiayigexiayishou" @click="nextMusic"></span>
        </div>
        <div class="audio_play_center">
          <div class="music_lyrics">歌词未实现</div>
          <div class="timing_scrollbar_box" @click="change_play_time">
            <div class="timing_scrollbar_new"></div>
            <div class="timing_scrollbar_head"></div>
          </div>
          <div class="time_display">
            {{ currentlong }} / {{ timinglong }}
          </div>
        </div>
        <div class="audio_play_right"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 优化方案：将关联样式由audio的播放暂停事件来控制
import { onMounted, ref, watch,inject } from "vue";
import { success } from "@/static/js/alert.js";

// 定义组件名称
defineOptions({
  name: "music_play",
});

// 响应式数据
const currentlong = ref("00:00");
const timinglong = ref("00:00");

// 获取音乐数据
const musicList= inject('music')();
const test_music_data = musicList.value.musicList;

// 播放/暂停音乐
const play_item = async (e) => {
  const id = e.target.getAttribute("id");
  const music = test_music_data.find(item => item.music_id === id);
  musicList.value.setCurrentMusic(music);

  if (document.getElementById(id).paused) {
    if (musicList.value.current_music) {
      document.getElementById(musicList.value.current_music.music_id).pause();
      let pre_list = document.querySelectorAll(`#${musicList.value.current_music.music_id}`);
      pre_list.forEach((item) => {
        if (item.tagName == "SPAN") {
          document.querySelector("#bottom_play").setAttribute("class", "icon-bofang iconfont list_span");
          item.setAttribute("class", "icon-bofang iconfont list_span");
        }
      });
    }
    document.getElementById(id).play();
    e.target.setAttribute("class", "icon-bofang1 iconfont list_span");
    document.querySelector("#bottom_play").setAttribute("class", "icon-bofang1 iconfont list_span");
  } else {
    document.getElementById(id).pause();
    e.target.setAttribute("class", "icon-bofang iconfont list_span");
    document.querySelector("#bottom_play").setAttribute("class", "icon-bofang iconfont list_span");
  }
};

// 播放当前音乐
const playCurrentMusic = (e) => {

  if (musicList.value.current_music) {
    const id = musicList.value.current_music.music_id;
    const audio = document.getElementById(id);
    if (audio.paused) {
      audio.play();
      e.target.setAttribute("class", "icon-bofang1 iconfont list_span");
      document.querySelector(`span[id=${id}]`).setAttribute("class", "icon-bofang1 iconfont list_span");
    } else {
      audio.pause();
      e.target.setAttribute("class", "icon-bofang iconfont list_span");
      document.querySelector(`span[id=${id}]`).setAttribute("class", "icon-bofang iconfont list_span");
    }
  } else { 
     const music = test_music_data[0]
     const id = music.music_id
     const playaudio= document.querySelector(`audio[id=${id}]`)
     playaudio.play()
     document.querySelector(`span[id=${id}]`).setAttribute("class", "icon-bofang1 iconfont list_span");
     document.querySelector("#bottom_play").setAttribute("class", "icon-bofang1 iconfont list_span");
     musicList.value.setCurrentMusic(music);
  }
};

// 切换到上一首
const prevMusic = () => {
  musicList.value.prevMusic();
  if (musicList.value.current_music) {
    const id = musicList.value.current_music.music_id;
    document.getElementById(id).play();
  } else { 
    success("播放列表已循环!")
    playCurrentMusic()
  }
};

// 切换到下一首
const nextMusic = () => {
  musicList.value.nextMusic();
  if (musicList.value.current_music) {
    const id = musicList.value.current_music.music_id;
    document.getElementById(id).play();
  } else { 
     success("播放列表已循环!")
     playCurrentMusic()
  }
};

// 添加到播放列表
const add_to = (e) => {
  const id = e.target.parentNode.childNodes[0];
};

// 更多操作
const select_more = (e) => {
  const id = e.target.parentNode.childNodes[0];
};

// 调整播放进度
const change_play_time = (e) => {
  if (!musicList.value.current_music) { 
    return
  }
  let audio = document.getElementById(musicList.value.current_music.music_id);
  if (e.target.childNodes[0]) {
    let ratio = e.offsetX / e.target.clientWidth;
    audio.currentTime = ratio * audio.duration;
    e.target.childNodes[0].style.width = `${ratio * 100}%`;
  } else {
    let ratio = e.offsetX / e.target.parentNode.clientWidth;
    audio.currentTime = ratio * audio.duration;
    e.target.style.width = `${ratio * 100}%`;
  }
  audio.play()
  document.querySelector(`span[id=${musicList.value.current_music.music_id}]`).setAttribute("class", "icon-bofang1 iconfont list_span");

};
// 播放完毕操作
const hanleAudioend = function (e) { 
  const id=e.target.getAttribute("id")
  document.querySelector(`span[id=${id}]`).setAttribute("class", "icon-bofang iconfont list_span");
  document.querySelector("#bottom_play").setAttribute("class", "icon-bofang iconfont list_span");
}

// 获取当前播放时间
const get_current_long = (e) => {
  const id = e.target.getAttribute("id");
  const music = test_music_data.find(item => item.music_id === id);
  musicList.value.setCurrentMusic(music);

  var minutes = Math.floor(e.target.currentTime / 60);
  var seconds = Math.floor(e.target.currentTime % 60);
  if (seconds < 10) {
    seconds = "0" + seconds;
  }
  currentlong.value = minutes + ":" + seconds;

  let ratio = e.target.currentTime / e.target.duration;
  document.querySelector(".timing_scrollbar_new").style.width = `${ratio * 100}%`;
};

// 获取总时长
const get_time_long = (e) => {
  var minutes = Math.floor(e.target.duration / 60);
  var seconds = Math.floor(e.target.duration % 60);
  if (seconds < 10) {
    seconds = "0" + seconds;
  }
  timinglong.value = minutes + ":" + seconds;
};

// 初始化
onMounted(() => {
  document
    .querySelector(".timing_scrollbar_box")
    .addEventListener("click", change_play_time);
});
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  color: #333;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* 音乐播放器容器 */
.render_music_play {
  background: linear-gradient(135deg, #1e1e1e, #3a3a3a);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}

/* 隐藏音频元素 */
.audio_source {
  display: none;
}

/* 音乐列表容器 */
.music_container {
  display: flex;
  height: calc(100vh - 100px);
  padding: 20px;
}

/* 左侧音乐列表 */
.all_music_box_left {
  width: 70%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px;
  overflow: hidden;
}

.music_list_nav {
  height: 40px;
  margin-bottom: 10px;
}

.music_list_box {
  height: calc(100% - 50px);
  overflow-y: auto;
  padding-right: 10px;
}

/* 自定义滚动条 */
.music_list_box::-webkit-scrollbar {
  width: 6px;
}

.music_list_box::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.music_list_box::-webkit-scrollbar-track {
  background: transparent;
}

/* 音乐列表项 */
.music_list {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 10px;
  margin-bottom: 5px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: background 0.3s ease;
}

.music_list:hover {
  background: rgba(255, 255, 255, 0.1);
}

.music_index {
  width: 30px;
  text-align: center;
  font-size: 14px;
  color: #888;
}

.music_list_info {
  flex: 1;
  display: flex;
  align-items: center;
}

.music_list_name {
  flex: 1;
  font-size: 16px;
  color: #fff;
}

.music_list_func {
  display: flex;
  gap: 15px;
  margin-right: 20px;
  vertical-align: middle;
}

.music_list_func .list_span {
  font-size: 20px;
  cursor: pointer;
  color: #fff;
  transition: color 0.3s ease;
}

.music_list_func .list_span:hover {
  color: #1db954;
}

.music_list_singer {
  width: 150px;
  font-size: 14px;
  color: #888;
}

.music_list_timing {
  width: 60px;
  text-align: right;
  font-size: 14px;
  color: #888;
}

/* 播放控件 */
.audio_play_box {
  height: 100px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.audio_play_left {
  display: flex;
  gap: 20px;
  align-items: center;
}

.audio_play_left .iconfont {
  font-size: 24px;
  cursor: pointer;
  color: #fff;
  transition: color 0.3s ease;
}

.audio_play_left .iconfont:hover {
  color: #1db954;
}

.audio_play_center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.music_lyrics {
  font-size: 16px;
  color: #fff;
}

.timing_scrollbar_box {
  width: 80%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.timing_scrollbar_new {
  height: 100%;
  background: #1db954;
  border-radius: 2px;
  width: 0;
}

.time_display {
  font-size: 14px;
  color: #888;
}

.audio_play_right {
  width: 200px;
}
.play-pause-button {
        width: 30px;
        height: 30px;
        background-color:#484848 ;
        border-radius: 50%;
        display: flex;
        align-items: center;
            justify-content: center;
            cursor: pointer;
            border: none;
            outline: none; 
}

.play-pause-button .icon {
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 12px solid white;
}

.play-pause-button.paused .icon {
            width: 12px;
            height: 12px;
            background-color: white;
            border: none;
}

</style>